<template>
  <router-view></router-view>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { ElInput, ElCard } from "element-plus";
// 假设你有一个 autofit 函数
function autofit(element) {
  const resize = () => {
    element.style.fontSize =
      Math.min(element.clientWidth / (element.scrollWidth / 2), 40) + "px";
  };

  // 监听窗口大小变化
  window.addEventListener("resize", resize);

  // 返回 resize 函数以便后续可以手动调用
  return resize;
}

const inputText = ref("This text will be resized to fit its container.");
const autofitElement = ref(null);
let resizeFunction;

onMounted(() => {
  if (autofitElement.value) {
    resizeFunction = autofit(autofitElement.value);
  }
});

// 当输入文本变化时，手动调用 resize
watch(inputText, () => {
  nextTick(() => {
    if (resizeFunction) {
      resizeFunction();
    }
  });
});
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  min-width: 1280px;
}
#app {
  width: 100%;
  height: 100%;
  min-width: 1280px;
}
a {
  color: blue;
  text-decoration: none;
}
a:active {
  color: green;
}

/* 修改滚动条宽度 */
::-webkit-scrollbar {
  width: 10px; /* 垂直滚动条宽度 */
  height: 10px; /* 横向滚动条高度 */
}

/* 修改滑块样式 */
::-webkit-scrollbar-thumb {
  cursor: pointer; /* 鼠标悬停时显示指针形状 */
  background: #d0d0d2; /* 滑块背景颜色 */
  border-radius: 5px; /* 滑块圆角 */
}

/* 修改横向滚动条滑块样式 */
::-webkit-scrollbar-thumb:horizontal {
  background: #d0d0d2; /* 横向滑块背景颜色 */
  border-radius: 5px; /* 横向滑块圆角 */
}

/* 修改轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景颜色 */
}

/* 修改横向滚动条轨道样式 */
::-webkit-scrollbar-track:horizontal {
  background: #f1f1f1; /* 横向轨道背景颜色 */
}
</style>